<template>
  <div id="app">
    <viva-header></viva-header>
    <div style="width: 100%;height: 100%">
      <div style="width: 150px;float: left;padding-top: 1px;">
        <left-menu ref="menuref" :menus="menus" :active-name="currentMenuPath" :open-names="openNames"></left-menu>
      </div>
      <div style="height: 100%;overflow:auto;margin: 0 auto">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>

import vivaHeader from "./components/common/header"
import leftMenu from "./components/common/leftMenu"

export default {
  name: 'app',
  components: {vivaHeader,leftMenu},
  data(){
    return {
      menus:[],
      currentMenuPath:'/',
      openNames:['用户探索','数据挖掘']
    }
  },
  computed:{
    currentMenu(){
      this.currentMenuPath=this.$store.getters.currentMenuGetter
      return this.currentMenuPath;
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      //加载菜单信息
      this.$http.get('/menu').then(function(rs){
        if(rs.data.state === 0){
          console.log(rs.data)
        }
      }).catch(function(err){
        console.log(err);
      })
      this.initMenu();
    })
  },
  watch:{
    '$store.getters.currentMenuGetter':function(newval){
      this.$nextTick(function () {
        console.log('update menu');
      })

     console.log('current-url-hash:'+newval);
    }
  },
  methods:{
    initMenu:function(){
      var _this = this;
      this.$http.get('/submenu').then(function(rs){
        console.log('submenu: '+rs)
        if(rs.data.state === 0){
          rs.data.data.forEach(function(value){
            _this.menus.push(value)
          })
        }else{

        }
      }).catch(function(err){
        console.log('err')
        console.log(err);
      })
    }
  }
}
</script>

<style>
html,body{
  height: 100%;
  width: 100%;
  padding: 0 0;
  margin: 0 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-top: 72px;
  height: 100%;
}
</style>
